<template>
  <div class="container">
    <nav-bar title="详情" />
    <div class="comments">
      <div class="notips" v-if="comments.length === 0">暂无评论</div>
      <div class="item" v-for="(item, index) in comments" :key="index">
        <div class="userhd">
          <img v-if="item.UserPhoto==='' || item.UserPhoto===null" class="person" src='../../assets/img/person.png' />
          <img v-else class="person" :src='item.UserPhoto' />
          <div class="info">
            <h3>{{item.UserName}}</h3>
          </div>
          <div class="stars">
            <i 
              v-for="(itemIn, index) in [1,2,3,4,5]" 
              :key="index"
            >
              <img v-if="index<item.ReviewMark" src='../../assets/img/star-on.png' />
              <img v-else src='../../assets/img/star.png' />
            </i>
          </div>
        </div>
        <div class="say" v-if="item.ReviewContent">
          <p>{{item.ReviewContent}}</p>
        </div>
        <div class="imglist">
          <img 
            v-for="(itemIn, index) in item.Images" :key="index"
            :src='itemIn.CommentImage' 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { 
  getProductComments 
} from '../../network/product'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      comments: [],
    }
  },
  mounted() {
    this.getProductComments()
  },
  methods: {
    getProductComments(){
      let requestData = {
        pId: this.$route.query.id,
        pageNo: 1,
        pageSize: 10,
        commentType: 0,
        shopBranchId: 0
      }
      getProductComments(requestData, list => {
        this.comments = list
      })
    },
  }
}
</script>

<style scoped>
.container{
  background-color: #e6e5e5;
}
.comments .item{
  padding: 20px;
  margin-bottom: 10px;
  background-color: #fff;
}
.comments .item .userhd{
  display: flex;
  align-items: center;
}
.comments .item .userhd .info{
  flex-grow: 1;
}
.comments .item .userhd .person{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}
.comments .item .say{
  padding: 6px 10px;
  margin-top: 5px;
  font-size: 14px;
  background-color: #f4f4f4;
  border-radius: 3px;
}
.comments .imglist{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.comments .imglist img{
  width: 32%;
  height: 32%;
  margin-top: 7px;
}
.notips{
  text-align: center;
  padding-top: 50px;
  color: #999;
}
.stars{
  display: flex;
  align-items: center;
  height: 40px;
  padding-left: 10px;
}
.stars i{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
}
.stars i img{
  width: 20px;
  height: 20px;
}
</style>